<template>
  <div>
    <!-- 我是分页器 -->
    <div class="fr page">
      <div class="sui-pagination clearfix">
        <ul>
          <!-- 上 -->
          <li class="prev " :disabled = 'pageNo==1' @click="$emit('getPageNo',pageNo - 1)">
            <a href="#">«上一页</a>
          </li>
          <li  @click="$emit('getPageNo',1)" :class="{ active:pageNo == 1 }" v-if="this.pageNo != 1">
            <a href="#">1</a>
          </li>
          <li class="dotted"><span>...</span></li>
          <!-- 中 -->
          <li v-for="(page,index) in startNumAndEndNum.end" :key="index" @click="$emit('getPageNo',page)" :class="{ active:pageNo == page }" >
            <a href="#">{{ page }}</a>
          </li>
          <!-- 下 -->
          <li class="dotted"><span>...</span></li>
          <li @click="$emit('getPageNo',totalpage)">
            <a href="#">{{ totalpage }}</a>
          </li>
          <li class="next" :disabled = 'pageNo==totalpage' @click="$emit('getPageNo',pageNo + 1)">
            <a href="#">下一页»</a>
          </li>
        </ul>
        <div class="total"><span class="totalfont">共{{total}}条数据</span></div>
      </div>
    </div>
    <!-- <h1 class="texth1">{{ startNumAndEndNum }}---{{ pageNo }}---共{{  totalpage}}页  --一共{{ total }}条数据</h1> -->
 </div>
</template>
<script>
export default {
  name: "Pagination",
  props: ['pageNo','pageSize','total','continues'],
  computed: {
    // 总共多少页
    totalpage() {
        // 向上取整
        return Math.ceil(this.total/this.pageSize )
    },
    startNumAndEndNum() {
      const {continues,pageNo,totalpage} = this
        let start = 0, end = 0;
        // 不正常现象连续页码数大于总页码数
        if(continues > totalpage ) {
            start = 1;
            end = totalpage;
        } else{//正常现象
            start = pageNo -  parseInt(continues / 2);
            end = pageNo + parseInt(continues / 2);
            if(start < 1) {
              start = 1
              end = continues
            }
            if(end > totalpage) {
              end = totalpage
              start = totalpage - continues +1
            }
        }
        return {start,end}    
        
    },

  },
  mounted() {
    // const {totalpage} = this
    // console.log(this.continues);
   },
};
</script>

<style lang="scss" scoped>
      .page {
        width: 1200px;
        height: 66px;
        text-align: center;
        .total {
            display: block;
            width: 100px !important;
            height: 30px;
            background-color: #fafafa;
            .totalfont {
                // margin-top: 20px;
                 line-height: normal;
            }
        }
   
        .sui-pagination {
          margin: 18px 0;

          ul {
            margin-left: 0;
            margin-bottom: 0;
            vertical-align: middle;
            width: 1200px;
            float: left;

            li {
              line-height: 18px;
              display: inline-block;

              a {
                position: relative;
                float: left;
                line-height: 18px;
                text-decoration: none;
                background-color: #fff;
                border: 1px solid #e0e9ee;
                margin-left: -1px;
                font-size: 14px;
                padding: 9px 18px;
                color: #333;
              }

              &.active {
                a {
                  background-color: #08b3ec;
                  color: #333;
                  border-color: #e0e9ee;
                  cursor: default;
                }
              }

              &.prev {
                a {
                  background-color: #fafafa;
                }
              }

              &.disabled {
                a {
                  color: #999;
                  cursor: default;
                }
              }

              &.dotted {
                span {
                  margin-left: -1px;
                  position: relative;
                  float: left;
                  line-height: 18px;
                  text-decoration: none;
                  background-color: #fff;
                  font-size: 14px;
                  border: 0;
                  padding: 9px 18px;
                  color: #333;
                  border: 1px solid #e0e9ee;
                }
              }

              &.next {
                a {
                  background-color: #fafafa;
                }
              }
            }
          }

          div {
            color: #333;
            font-size: 14px;
            float: right;
            width: 241px;
          }
        }
      }
      .texth1 {
        text-align: center;
      }
      // .activeNo {
      //     background-color: #08b3ec !important;
      //   }
</style>